<template>
  <div class="xunlian">
    <div style="margin-bottom: 24px">
      <div
        @click="checkClick(item.type)"
        :class="{ checkStyle: true, checkStyleActive: checkActive == item.type }"
        v-for="(item, index) in checkList"
        :key="index"
      >
        {{ item.text }}
      </div>
    </div>
    <div class="box1">
      <div class="box1Left" style="position: relative">
        <div>
          <span class="titStyle">训练水平综合评定结果</span>
          <span
            @click="detailsclick"
            class="xiqngqing"
            style="position: absolute; right: 16px; top: 10px"
            >评定详情</span
          >
        </div>
        <div ref="chart" class="yibiaopan" style="padding-top: 10px"></div>
        <div class="pdTime" style="margin-top: 10px;">评定时间：2021-10-10</div>
        <div class="scBox">
          <div>
            <div class="pdText">vs上次评定</div>
            <div>
              <span class="fsText">89.33</span>
              <span class="bhNum" style="color: #59ba89">
                5
                <i class="el-icon-top-right"></i>
                <!-- <i class="el-icon-bottom-right"></i> -->
              </span>
            </div>
          </div>
          <div>
            <div class="pdText">vs同类型部队旅均值</div>
            <div>
              <span class="bhNum" style="color: #f56666">
                3
                <i class="el-icon-bottom-left"></i>
                <!-- <i class="el-icon-top-left"></i> -->
              </span>
              <span class="fsText">73.33</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box1Cont">
        <div>
          <span class="titStyle">综合成绩变化趋势</span>
        </div>
        <div ref="qushibox" class="qushibianhua"></div>
      </div>
      <div class="box1Right">
        <div>
          <span class="titStyle">分析要点说明</span>
        </div>
        <div class="yaodianbox" v-html="dataText"></div>
      </div>
    </div>
    <div class="jieduanbox2">
      <div>
        <span class="titStyle">问题分析与提升辅助建议</span>
      </div>
      <div class="jieduanbox2top">
        <div style="margin: 16px">
          <div>
            <span class="jd2topLeft">01.关键影响因子</span>
          </div>
          <div
            ref="kfgjyinzi"
            class="qushibianhua"
            style="margin-top: 8px"
          ></div>
        </div>
        <div>
          <div style="margin: 16px">
            <div>
              <span class="jd2topLeft">02.按提升潜力指数排序</span>
            </div>
            <div class="qushibianhua jd2topLeftpaixu">
              <div v-for="(item, index) in paimingList" :key="index">
                <div
                  class="jd2paixutext"
                  :style="index == 0 ? 'margin-top:0px' : 'margin-top:24px'"
                >
                  {{ item.text }}
                </div>
                <el-progress
                  :format="format"
                  :stroke-width="12"
                  color="#277074"
                  :percentage="item.value"
                ></el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="jieduanbox2bottom">
        <div style="margin-bottom: 6px">
          <span class="jd2topLeft">03.影响评定的具体问题排序</span>
        </div>
        <div>
          <el-table
            :data="skuListInfo"
            height="400"
            :span-method="objectSpanMethod"
            border
          >
            <el-table-column prop="zhibiao" label="具体末极指标">
              <template slot-scope="scope">
                <div
                  style="font-weight: 700"
                  :style="
                    scope.row.zhibiaoType == 1
                      ? 'color:#01575C'
                      : 'color:#59BA89'
                  "
                >
                  {{ scope.row.zhibiao }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="storeIds" label="指标提升潜力指数">
            </el-table-column>
            <el-table-column prop="feeTypeInfo" label="具体训练问题">
            </el-table-column>
            <el-table-column prop="productInfo" label="问题解决效用模拟器">
              <template slot-scope="scope">
                <span>
                  <el-slider
                    v-model="scope.row.productInfo"
                    @change="hdchange(scope.row, scope.row.productInfo)"
                  ></el-slider>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="billing" label="原始分数"> </el-table-column>
            <el-table-column prop="jieguo" label="影响最终评定结果">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- <div class="box3">
      <div class="box3Left">1</div>
      <div class="box3right">2</div>
    </div>
    <div class="box4">
      <div class="box4Left">1</div>
      <div class="box4right">2</div>
    </div> -->
  </div>
</template>

<script>
// 训练水平动态分析
export default {
  data() {
    return {
      checkActive: 2,
      checkList: [{
        text:"全部指标",
        type:2
      },{
        text:"过程性指标",
        type:0
      },{
        text:"阶段性指标",
        type:1
      }],
      timeRadio: "1", //时间选择
      timeRadiotwo: "1", //时间选择
      dataText:
        "1.b</br>2.cs</br>3.cb</br>4.cb</br>5.cb</br>6.cb</br>7.cb</br>8.cb</br>9.cb</br>10.cb</br>11.cb</br>12.cb</br>13.cb</br>14.cb</br>15.cb</br>16.cb</br>17.cb</br>18.cb</br>19.cb</br>20.cb</br>21.cb</br>22.cb</br>23.cb</br>",
      paimingList: [
        {
          text: "综合演练课目优良率（过程性）",
          value: 100,
        },
        {
          text: "关键岗位人员参训率（阶段性）",
          value: 80,
        },
        {
          text: "营主官训练成绩优良率（过程性）",
          value: 70,
        },
        {
          text: "训练场地可用率（阶段性）",
          value: 60,
        },
        {
          text: "心理适应性训练课目优良率（过程性）",
          value: 50,
        },
        {
          text: "心理适应性训练课目优良率（过程性）",
          value: 50,
        },
        {
          text: "心理适应性训练课目优良率（过程性）",
          value: 50,
        },
        {
          text: "心理适应性训练课目优良率（过程性）",
          value: 50,
        },
        {
          text: "心理适应性训练课目优良率（过程性）",
          value: 50,
        },
      ],
      skuListInfo: [
        {
          id: 1,
          zhibiao: "综合演练课目优良率（阶段性）",
          zhibiaoType: 1,
          storeIds: "1",
          productInfo: 10,
          feeTypeInfo: "学费",
          billing: "月/季/年制度",
          jieguo: 10,
        },
        {
          id: 2,
          zhibiao: "综合演练课目优良率（阶段性）",
          zhibiaoType: 1,
          storeIds: "2",
          productInfo: 20,
          feeTypeInfo: "学费",
          billing: "月/季/年制度",
          jieguo: 20,
        },
        {
          id: 3,
          zhibiao: "综合演练课目优良率（阶段性）",
          zhibiaoType: 1,
          storeIds: "3",
          productInfo: 30,
          feeTypeInfo: "学费",
          billing: "月/季/年制度",
          jieguo: 30,
        },
        {
          id: 4,
          zhibiao: "综合演练课目优良率（阶段性）",
          zhibiaoType: 2,
          storeIds: "4",
          productInfo: 40,
          feeTypeInfo: "学费",
          billing: "月/季/年制度",
          jieguo: 40,
        },
        {
          id: 5,
          zhibiao: "普通门店1",
          zhibiaoType: 2,
          storeIds: "4",
          productInfo: 50,
          feeTypeInfo: "学费",
          billing: "月/季/年制度",
          jieguo: 50,
        },
        {
          id: 6,
          zhibiao: "普通门店1",
          zhibiaoType: 2,
          storeIds: "4",
          productInfo: 50,
          feeTypeInfo: "学费",
          billing: "月/季/年制度",
          jieguo: 50,
        },
      ],
      typeNameArr: [],
      typeNamePos: 0,
      storeArr: [],
      storePos: 0,
      feeArr: [],
      feePos: 0,
      hoverOrderArr: [],
    };
  },
  props: {
    isdetails: {
      type: Boolean,
    },
  },
  components: {},
  mounted() {
    for (var i = 0; i < this.skuListInfo.length; i++) {
      this.skuListInfo[i].index = i;
    }
  },
  watch: {
    // isxuanran: {
    //   handler: function (newVal, oldVal) {
    //     // this.yibiaopan();
    //     this.qushi();
    //     this.leida();
    //     this.zbqushi()
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  methods: {
    checkClick(type) {
      this.checkActive = type;
    },
    //  训练水平综合评定结果
    yibiaopan() {
      let myChart = this.$echarts.init(this.$refs.chart);
      myChart.setOption({
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 12,
                roundCap: true,
                color: [
                  [0.25, "#F69D82"],
                  [0.5, "#FFD600"],
                  [0.75, "#59BA89"],
                  [1, "#01575C"],
                ],
              },
            },
            pointer: {
              icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
              length: "12%",
              width: 10,
              offsetCenter: [0, "-60%"],
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              length: 5,
              lineStyle: {
                color: "auto",
                width: 2,
              },
            },
            splitLine: {
              length: 10,
              lineStyle: {
                color: "auto",
                width: 2,
              },
            },
            axisLabel: {
              color: "#708189",
              fontSize: 12,
              distance: -40,
              formatter: function (value) {
                if (value === 0.875) {
                  return "优";
                } else if (value === 0.625) {
                  return "良";
                } else if (value === 0.375) {
                  return "中";
                } else if (value === 0.125) {
                  return "差";
                }
                return "";
              },
            },
            title: {
              offsetCenter: [0, "-40%"],
              fontSize: 14,
            },
            detail: {
              fontSize: 40,
              offsetCenter: [0, "-15%"],
              valueAnimation: true,
              formatter: function (value) {
                return Math.round(value * 100) + "分";
              },
              color: "auto",
            },
            data: [
              {
                value: 0.7,
                name: "综合评定",
              },
            ],
          },
        ],
      });
      window.onresize = myChart.resize;
    },
    // 综合成绩变化趋势
    qushi() {
      let myChart = this.$echarts.init(this.$refs.qushibox);
      myChart.setOption({
        color: ["#277074", "#59BA89"],
        legend: {
          icon: "rect",
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          left: 10,
          data: ["本单位评定", "同类型部队均值"],
          textStyle: {
            fontSize: 12,
            color: "#708189",
          },
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: false,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: [
          {
            boundaryGap: false,
            data: [
              "12-12",
              "12-13",
              "12-14",
              "12-15",
              "12-16",
              "12-17",
              "12-18",
            ],
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#708189",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#F4F6F8",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              //网格线
              show: true,
              lineStyle: {
                color: "#f5f5f5", //网格线的颜色
                width: 1,
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "本单位评定",
            type: "line",
            smooth: true,
            data: [420, 332, 301, 334, 350, 370, 370],
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
            areaStyle: {
              normal: {
                // 填充色渐变
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(39, 112, 116, 0.1)" },
                  { offset: 1, color: "rgba(79, 169, 172, 0)" },
                ]),
              },
            },
          },
          {
            name: "同类型部队均值",
            type: "line",
            smooth: true,
            data: [220, 182, 191, 234, 290, 330, 310],
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
            areaStyle: {
              normal: {
                // 填充色渐变
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(89, 186, 137, 0.1)" },
                  { offset: 1, color: "rgba(79, 169, 172, 0)" },
                ]),
              },
            },
          },
        ],
      });
      window.onresize = myChart.resize;
    },
    // 训练水平综合评定业务模型
    leida() {
      let myChart = this.$echarts.init(this.$refs.leida);
      myChart.setOption({
        legend: {
          left: 10,
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
        },
        grid: {
          left: "5%",
          right: "4%",
          bottom: "4%",
          top: "5%",
          containLabel: true,
        },
        color: ["#F69D82", "#59BA89", "#277074"],
        radar: {
          triggerEvent: true,
          // shape: 'circle',
          // axisLabel: { show: true },  刻度线上得值是否展示
          radius: 80,
          nameGap: 4,
          indicator: [
            { name: "训练计划制定", max: 6500 },
            { name: "训练监察奖惩", max: 16000 },
            { name: "人员素质", max: 30000 },
            { name: "训练条件建设", max: 38000 },
            { name: "训练考核", max: 52000 },
            { name: "训练计划落实", max: 25000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "本次评定",
                areaStyle: {},
                symbol: "none",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "上次评定",
                areaStyle: {},
                symbol: "none",
              },
              {
                value: [1000, 12000, 8000, 6000, 2000, 1000],
                name: "同类型部队均值",
                areaStyle: {},
                symbol: "none",
              },
            ],
          },
        ],
      });
      window.onresize = myChart.resize;
      myChart.on("click", function (params) {
        if (params.componentType === "radar") {
          // 点击到了 radar坐标轴标签 上
          console.log("点击的名称", params.name);
        } else if (params.componentType === "series") {
          //   console.log("不确定的位置")
        }
      });
    },
    // 各个一级指标变化趋势
    zbqushi() {
      let myChart = this.$echarts.init(this.$refs.zbqushinox);
      myChart.setOption({
        color: [
          "#277074",
          "#59BA89",
          "#A1C94A",
          "#E1F396",
          "#6780DC",
          "#4795F2",
        ],
        legend: {
          icon: "rect",
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          left: 10,
          textStyle: {
            fontSize: 12,
            color: "#708189",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: false,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            boundaryGap: false,
            data: [
              "12-12",
              "12-13",
              "12-14",
              "12-15",
              "12-16",
              "12-17",
              "12-18",
            ],
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#708189",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#F4F6F8",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              //网格线
              show: true,
              lineStyle: {
                color: "#f5f5f5", //网格线的颜色
                width: 1,
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "训练计划制定",
            type: "line",
            smooth: true,
            symbol: "circle", //实心得折点
            symbolSize: 6, //拐点圆的大小
            data: [420, 332, 301, 334, 350, 370, 370],
          },
          {
            name: "训练计划落实",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
            data: [220, 282, 191, 34, 290, 30, 310],
          },
          {
            name: "训练考核",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
            data: [20, 182, 191, 34, 290, 330, 10],
          },
          {
            name: "训练条件建设",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
            data: [220, 12, 191, 24, 290, 330, 30],
          },
          {
            name: "人员素质",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
            data: [20, 182, 191, 24, 290, 330, 410],
          },
          {
            name: "训练监察奖惩",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
            data: [320, 12, 191, 234, 20, 330, 310],
          },
        ],
      });
      window.onresize = myChart.resize;
    },
    // 问题分析与提升辅助建议  -  1.关键影响因子
    kfgjyinziData() {
      let myChart = this.$echarts.init(this.$refs.kfgjyinzi);
      myChart.setOption({
        series: [
          {
            type: "sankey",
            bottom: "10%",
            emphasis: {
              focus: "adjacency",
            },
            data: [
              { name: "a" },
              { name: "b" },
              { name: "a1" },
              { name: "b1" },
              { name: "c" },
              { name: "e" },
            ],
            links: [
              { source: "a", target: "a1", value: 5 },
              { source: "e", target: "b", value: 3 },
              { source: "a", target: "b1", value: 3 },
              { source: "b1", target: "a1", value: 1 },
              { source: "b1", target: "c", value: 2 },
              { source: "b", target: "c", value: 1 },
            ],
            lineStyle: {
              color: "source",
              curveness: 0.5,
            },
          },
        ],
      });
      window.onresize = myChart.resize;
    },
    // 问题解决效用模拟器
    hdchange(item, data) {
      this.skuListInfo[item.index].jieguo = data * 2;
      console.log("变化", item, data);
    },
    detailsclick() {
      this.$emit("detailsWatch", 1);
    },
    // 合并单元格使用
    merageInit() {
      this.typeNameArr = [];
      this.typeNamePos = 0;
      this.storeArr = [];
      this.storePos = 0;
      this.feeArr = [];
      this.feePos = 0;
    },
    merage() {
      this.merageInit();
      for (let i = 0; i < this.skuListInfo.length; i += 1) {
        if (i === 0) {
          // 第一行必须存在
          this.typeNameArr.push(1);
          this.typeNamePos = 0;
          this.storeArr.push(1);
          this.storePos = 0;
          this.feeArr.push(1);
          this.feePos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
          // 第一列
          // eslint-disable-next-line no-lonely-if
          if (this.skuListInfo[i].zhibiao === this.skuListInfo[i - 1].zhibiao) {
            this.typeNameArr[this.typeNamePos] += 1;
            this.typeNameArr.push(0);
          } else {
            this.typeNameArr.push(1);
            this.typeNamePos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 第一列的合并方法
        const row1 = this.typeNameArr[rowIndex];
        const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row1,
          colspan: col1,
        };
      }
    },
    format() {
      return "";
    },
  },
};
</script>

<style  scoped>
@import "./css/index.css";
</style>

